<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- <message-box title="我的标题" content="我的内容" dragable="true"></message-box> -->
    <button>点击</button>
</body>
<script type="module">
    // 调用方式 
    // Promise.resovle race all ....
    import Dialog from "./dialog.js"

    // let messagebox = document.querySelector("message-box");
    let dialog = new Dialog({
        dragable: true
    })
    
    document.querySelector("button").onclick = function () {
        // messagebox.open();
        dialog.open()
    }
    // messagebox.addEventListener("cancel",function(){
    //     console.log("点击了取消");
    // })

    // messagebox.addEventListener("success",function(){
    //     console.log("点击了成功");
    // })

    // new Dialog({
    //     width: "30%",
    // 	height: "250px",
    // 	title: "测试标题",
    // 	content: "测试内容",
    // 	dragable: true, //是否可拖拽
    // 	maskable: true, //是否有遮罩
    // 	isCancel:false //是否有取消
    // })
    // 合并配置
    // 外部传入配置
    // let config1 = {
    //     width: "20%",
    // }
    // 默认配置
    // let defaultConfig = {
    //     width: "30%",
    //     height: "250px",
    //     title: "测试标题",
    //     content: "测试内容",
    //     dragable: true, //是否可拖拽
    //     maskable: true, //是否有遮罩
    //     isCancel: false //是否有取消
    // }
    // 方式一
    //let opts = Object.assign(defaultConfig, config1);
    //console.log(opts);
// 一.封装组件  ---》webcomponent : 1.继承html  2. 自定组件（shadowdom、template、slot）
// 二、封装了 messagebox（公有私有）  --》事件委托 --》把事件触发到外部（customEvent：addEventListener 、 dispatchEvent）；----》外部组件调用
// 三、实现实例化调用
//作业： 1.采取其他方式合并配置 2.实现可控拖拽功能；

     //合并配置
    //  let opts = {}
    //  for(let key in defaultConfig){
    //     if(config1[key] !== undefined){
    //         opts[key] = config1[key]
    //     }else{
    //         opts[key] = defaultConfig[key]
    //     }
    //  }
    //  console.log(opts)


</script>

</html>